<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手表列表</title>
  <link rel="stylesheet" href="css/list.css">
</head>

<body>
  <div class="web">
    <!-- 头部 -->
    <header>
      <div class="h_top">
        <div class="h_top_box">
          <div class="h_icons">
            <img src="img/icon_01.png" alt="">
            <img src="img/icon_02.png" alt="">
            <img src="img/icon_03.png" alt="">
          </div>
          <p>
            伊森官方旗舰网站欢迎您的光临
          </p>
        </div>
      </div>
      <!-- 导航栏 -->
      <div class="h_nav">
        <div class="logo">
          <a href="index.html">
            <img src="img/logo.png" alt="">
          </a>
        </div>
        <ul class="nav">
          <li>
            <a href="index.html">首页</a>
          </li>
          <li>
            <a href="javascript:;">关于伊森</a>
            <div class="nav_1">
              <div class="nav_2">
                <p>男士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">劳力士</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">格拉苏蒂原创</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
              <div class="nav_2">
                <p>女士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">爱马仕</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">香奈儿</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
            </div>
          </li>
          <li class="active">
            <a href="list.html">产品系列</a>
            <div class="nav_1">
              <div class="nav_2">
                <p>男士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">劳力士</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">格拉苏蒂原创</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
              <div class="nav_2">
                <p>女士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">爱马仕</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">香奈儿</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
            </div>
          </li>
          <li>
            <a href="javascript:;">售后服务</a>
            <div class="nav_1">
              <div class="nav_2">
                <p>男士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">劳力士</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">格拉苏蒂原创</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
              <div class="nav_2">
                <p>女士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">爱马仕</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">香奈儿</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
            </div>
          </li>
          <li>
            <a href="javascript:;">联系伊森</a>
            <div class="nav_1">
              <div class="nav_2">
                <p>男士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">劳力士</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">格拉苏蒂原创</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
              <div class="nav_2">
                <p>女士腕表系列</p>
                <div class="nav_3">
                  <a href="javascript:;">爱马仕</a>
                  <a href="javascript:;">朗格</a>
                  <a href="javascript:;">里查德米尔</a>
                  <a href="javascript:;">香奈儿</a>
                  <a href="javascript:;">瑞宝</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div class="carousel">
        <ul class="caro_img">
          <li><img src="img/carousel_01.jpg" alt=""></li>
          <li><img src="img/carousel_02.jpg" alt=""></li>
          <li><img src="img/carousel_03.jpg" alt=""></li>
        </ul>
        <div class="arrow left_arr">&lt;</div>
        <div class="arrow right_arr">&gt;</div>
        <ol class="dot"></ol>
      </div>
    </header>
    <!-- 内容 -->
    <main>
      <section class="crumber">
        <p>您的位置</p>
        <div class="crum_nav">
          <span>首页</span>&gt;
          <span>产品系列</span>&gt;
          <span>男士腕表系列</span>
        </div>
      </section>
      <section class="m_content">
        <aside>
          <h2>所有伊森腕表</h2>
          <!-- <div class="tiaojian">
            <h3 class="hide">隐藏筛选条件 <span>+</span></h3>
            <ul>
              <li>尺寸 <span>+</span></li>
              <li>功能 <span>+</span></li>
              <li>材质 <span>+</span></li>
              <li>价格 <span>+</span></li>
            </ul>
          </div> -->
          <div class="first">
            <p>隐藏筛选条件 <span>+</span></p>
            <ul class="second">
              <li>
                <p>尺寸 <span>+</span></p>
                <div class="third">
                  <a href="#">大</a>
                  <a href="#">中</a>
                  <a href="#">小</a>
                </div>
              </li>
              <li>
                <p>功能 <span>+</span></p>
              </li>
              <li>
                <p>材质 <span>+</span></p>
              </li>
              <li>
                <p>价格 <span>+</span></p>
              </li>
            </ul>
          </div>
          <p>查看所有</p>
          <div class="male">
            <h3 class="hide">男士腕表系列 <span>+</span></h3>
            <ul>
              <li>男士腕表1</li>
              <li>男士腕表2</li>
              <li>男士腕表3</li>
              <li>男士腕表4</li>
              <li>男士腕表5</li>
            </ul>
          </div>
          <div class="female">
            <h3 class="hide">女士腕表系列 <span>+</span></h3>
            <ul>
              <li>女士腕表1</li>
              <li>女士腕表2</li>
              <li>女士腕表3</li>
              <li>女士腕表4</li>
              <li>女士腕表5</li>
            </ul>
          </div>
        </aside>
        <section class="m_list">
          <p class="title_1">卓越性能与显赫象征</p>
          <h2>伊森腕表</h2>
          <p class="desc">伊森腕表蕴含最优质的原材料与一丝不苟的工艺。每件组件均由伊森自行以严格的标准设计及研制。</p>
          <!-- 图片和内容 -->
          <ul class="list_img">
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_05.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_06.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_07.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_05.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_06.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_07.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_05.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_06.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
            <li>
              <a href="detail.html">
                <div class="img">
                  <img src="img/watch_07.png" alt="">
                </div>
                <p class="wat_name">伊森男士腕表时尚</p>
                <p class="wat_type">ZS-W001枫木</p>
              </a>
            </li>
          </ul>
          <!-- 分页 -->
          <section class="page">
            <span>上一页</span>
            <span>1</span>
            <span class="active">2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>...</span>
            <span>10</span>
            <span>下一页</span>
            <input type="text">
            <button>确定</button>
          </section>
        </section>
      </section>
    </main>
    <!-- 尾部 -->
    <footer>
      <div class="footer_top">
        <dl>
          <dt>伊森腕表品牌</dt>
          <dd>品牌简介</dd>
          <dd>总裁致辞</dd>
          <dd>员工关怀</dd>
          <dd>招商加盟</dd>
          <dd>人才招聘</dd>
        </dl>
        <dl>
          <dt>伊森售后服务</dt>
          <dd>售后检测点</dd>
          <dd>送修流程</dd>
          <dd>维修报价</dd>
          <dd>保修政策</dd>
          <dd>联系客服</dd>
        </dl>
        <dl>
          <dt>关于伊森</dt>
          <dd>媒体关注</dd>
          <dd>合作伙伴</dd>
          <dd>销售区域</dd>
          <dd>荣誉资质</dd>
          <dd>伊森手表学堂</dd>
        </dl>
      </div>
      <div class="footer_bott">
        <span>Copyright2016伊森腕表版权所有</span>
        <span>粤ICP备1234567号</span>
        <span>贵宾专线：400-200-9999</span>
        <span>地址：广州市海珠区XX大厦1808室</span>
      </div>
    </footer>

    <script src="js/carousel.js"></script>
    <script src="js/list.js"></script>
  </div>
</body>

</html>